<!--
 * @Author: Haochen
 * @Date: 2021-12-07 17:37:17
 * @LastEditTime: 2021-12-11 16:50:04
 * @FilePath: \students-system\src\views\students\AddStudent.vue
-->
<template>
  <div>
    <BreadCrumb />
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>新增学生</span>
      </div>
      <div class="text item">
        <div class="box-content">
          <ul>
            <!-- // * 姓名 -->
            <li>
              姓名：<el-input
                v-model="newStudent.name"
                placeholder="请输入内容"
              ></el-input>
            </li>
            <!-- // * 年龄 -->
            <li>
              年龄：<el-input
                v-model="newStudent.age"
                placeholder="请输入内容"
              ></el-input>
            </li>
            <!-- // * 性别 -->
            <li>
              性别：<el-radio v-model="newStudent.gender" label="男"
                >男</el-radio
              >&nbsp;
              <el-radio v-model="newStudent.gender" label="女">女</el-radio>
            </li>
            <!-- // * 专业 -->
            <li>
              专业：
              <el-select
                v-model="newStudent.subjectsId"
                placeholder="请选择专业"
              >
                <el-option
                  v-for="subject in subjects"
                  :key="subject._id"
                  :label="subject.name"
                  :value="subject._id"
                >
                </el-option>
              </el-select>
            </li>
            <!-- // * 班级 -->
            <li>
              班级：
              <el-select
                v-model="newStudent.classesId"
                placeholder="请选择班级"
              >
                <el-option
                  v-for="subClass in classes"
                  :key="subClass._id"
                  :label="subClass.name"
                  :value="subClass._id"
                >
                </el-option>
              </el-select>
            </li>
            <!-- // * 头像 -->
            <li>头像上传：<input type="file" @change="uploadImg($event)" /></li>
            <li v-show="newStudent.imagePath">
              <img :src="newStudent.imagePath" alt="" />
            </li>

            <!-- // * 确认按钮 -->
            <li>
              <el-button type="primary" @click="confirmAdd">确认新增</el-button>
              <!-- <button>确认新增</button> -->
            </li>
          </ul>
        </div>
      </div>
    </el-card>
  </div>

  <!-- <div class="side-box"> -->
  <!-- <BreadCrumb></BreadCrumb> -->
  <!-- <h3>新增学生</h3> -->
  <!-- <ul>
      <li>姓名：<input type="text" v-model="newStudent.name" /></li>
      <li>年龄：<input type="text" v-model="newStudent.age" /></li>
      <li>
        性别：
        <input type="radio" v-model="newStudent.gender" value="男" />
        <label for="">男</label>
        &nbsp;
        <input type="radio" v-model="newStudent.gender" value="女" />
        <label for="">女</label>
      </li>

      <li>
        专业：
        <select v-model="newStudent.subjectsId">
          <option :value="undefined" disabled>请选择专业</option>
          <option
            v-for="subject in subjects"
            :key="subject._id"
            :value="subject._id"
          >
            {{ subject.name }}
          </option>
        </select>
      </li>
      <li>
        班级：
        <select v-model="newStudent.classesId">
          <option :value="undefined" disabled>请选择班级</option>
          <option
            v-for="subClass in classes"
            :key="subClass._id"
            :value="subClass._id"
          >
            {{ subClass.name }}
          </option>
        </select>
      </li>
      <li>头像上传：<input type="file" @change="uploadImg($event)" /></li>
      <li v-show="newStudent.imagePath">
        <img :src="newStudent.imagePath" alt="" />
      </li>
      <li><button @click="confirmAdd">确认新增</button></li>
    </ul> -->
  <!-- </div> -->
</template>

<script>
// import bus from './bus.js';
import BreadCrumb from '../../components/common/BreadCrumb.vue';
import { createNamespacedHelpers } from 'vuex';

const { mapActions: subjectsActions, mapState: subjectsState } =
  createNamespacedHelpers('subjects');
const { mapActions: classesActions, mapState: classesState } =
  createNamespacedHelpers('classes');

export default {
  components: {
    BreadCrumb,
  },
  created() {
    this.getSubjectsAsync();
  },
  data() {
    return {
      newStudent: {},
    };
  },
  computed: {
    ...subjectsState({ subjects: 'rows' }),
    ...classesState({ classes: 'rows' }),
  },

  methods: {
    ...subjectsActions(['getSubjectsAsync']),
    ...classesActions(['getClassesBySubIdAsync']),

    async uploadImg(event) {
      const files = event.target.files;
      const fd = new FormData();
      fd.append('file', files[0]);
      const { data: res } = await this.$api.students.uploadStudentImg(fd);

      if (res.code) {
        this.newStudent = {
          ...this.newStudent,
          imagePath: res.data[0],
        };
        alert(res.message);
      }
    },

    handleAvatarSuccess(res, file) {
      console.log(file);
      this.imageUrl = URL.createObjectURL(file.raw);
    },

    async confirmAdd() {
      // console.log(this.newStudent);
      const { data: res } = await this.$api.students.addStudent(
        this.newStudent
      );
      if (res.code) {
        alert(res.message);
        this.$router.push('/home/StudentsList');
      }
    },
  },

  watch: {
    'newStudent.subjectsId'(id) {
      this.getClassesBySubIdAsync({ subjectsId: id });
    },
  },
};
</script>

<style src="../../assets/css/common.css" scoped></style>
